<template>
	<div class="partnerList">
		<div class="partnerList_top">
			<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 10px;">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/teamList' }">战队列表</el-breadcrumb-item>
				<el-breadcrumb-item>战队列表</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="partnerList_bottom">
			<div class="partnerList_bottom_new">
				<div class="partnerList_bottom_new_goods">
					<div class="partnerList_bottom_new_goods_screening">
						<div class="item">
							<el-button type="primary" size="medium" style="margin-right: 20px" @click="handleAdd">添加战队
							</el-button>
						</div>
                        <span>卖场：</span>
                        <el-select
                          v-model="marketId"
                          clearable
                          @change="selectMarket"
                          filterable
                          placeholder="请选择卖场"
                        >
                          <el-option
                            v-for="item in marketList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          >
                          </el-option>
                        </el-select>
						<div class="item">
							<el-input v-model="keyword" placeholder="搜索"></el-input>
						</div>
						<div class="item">
							<button @click="handerSeach" class="searchBtn"><i class="el-icon-search"></i>搜索</button>
						</div>
					</div>
				</div>
			</div>
			<div class="partnerList_table">
				<div class="partnerList_bottom_table">
					<table>
						<tr>
							<th></th>
							<th>序号</th>
							<th>团队名称</th>
							<th>副标题</th>
							<th>图标</th>
							<th>创建时间</th>
							<th>操作</th>
						</tr>
						<tr v-for="(v,i) in listData" :key="i">
							<td>
								<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}"
									@click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
							</td>
							<td>{{v.id}}</td>
							<td>{{v.title}}</td>
							<td>
								{{v.sub_title}}
							</td>
							<td>
								<div style="width: 80px;height: 80px;overflow: hidden;margin:4px auto;">
									<img :src="v.icon" style="width: 100%;height: 100%;">
								</div>
							</td>
							<!-- <td>
								<template v-if="v.payed_at">
									{{formatDate(v.created_at)}}
								</template>
								<template v-else>
									---
								</template>
							</td> -->
							<td>
								{{v.created_at}}
							</td>
							<td>
								<button class="editor shelves" @click="toEdit(v.id,v.activity_id)">编辑</button>
								<button class="editor check_active" @click="addMerchant(v.id,v.activity_id)">添加商户</button>
								<button class="editor yellow" @click="pageStore(v.id,v.market_id)">商户列表</button>
							</td>
						</tr>
						<tr v-if="listData.length == 0">
							<td class="table_title" colspan="10">当前数据空空如也</td>
						</tr>
					</table>
					<div class="partnerList_bottom_page">
						<div class="partnerList_bottom_page_left">
							<div class="partnerList_bottom_page_left_checkAll" @click="handerCheckAll">
								<font class="checkbox" :class="{'check_active' : checkAll}"><i
										class="el-icon-check"></i></font>
							</div>全选
							<!-- <button class="partnerList_bottom_page_left_btn" @click="selectDel">删除</button> -->
						</div>
						<div class="partnerList_bottom_page_right">
							<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
								:current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
								layout="total, sizes, prev, pager, next, jumper" :total="total" background>
							</el-pagination>
						</div>
					</div>
				</div>
			</div>
			<!-- 新增团队名单 -->
			<modal :title="MadalTitle" v-model="visibleShow" :centered="true" :maskClosable="false" @ok="teamAdd"
				@cancel="handleCancel">
				<div>
					<el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
						<el-form-item label="对应卖场" prop="name">
							<el-select v-model="market_id" placeholder="请选择">
								<el-option label="联坤卖场" :value="1">
								</el-option>
								<el-option label="柳州卖场" :value="2">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="对应活动" prop="name">
							<el-select v-model="activity_id" filterable placeholder="请选择">
								<el-option v-for="item in activityList" :key="item.id" :label="item.name"
									:value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="战队名称" prop="name">
							<el-input type="text" v-model="title" placeholder="战队名称" />
						</el-form-item>
						<el-form-item label="副标题" prop="name">
							<el-input type="text" v-model="sub_title" placeholder="副标题" />
						</el-form-item>
						<el-form-item label="图片上传" prop="name">
							<el-upload v-if="fileList.length <= 1" action="/api/client/base/uploadfile"
								list-type="picture-card" :on-preview="handlePictureCardPreview" ref="upload"
								:on-remove="handleRemove" :on-success="handleAvatarSuccess"
								:before-upload="beforeAvatarUpload" :auto-upload="true" :limit="1"
								:on-exceed="handleExceed" :file-list="fileList"
								accept="image/jpeg, image/jpg, image/gif, image/png" multiple>
								<i class="el-icon-plus"></i>
							</el-upload>
							<el-dialog :visible.sync="dialogVisible" style="z-index: 0;" :modal="false">
								<img width="100%" :src="dialogImageUrl" alt="">
							</el-dialog>
							<p>团队Logo</p>
						</el-form-item>
						<el-form-item label="状态" prop="name">
							<el-select v-model="status" placeholder="请选择">
								<el-option v-for="item in statusList" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>

					</el-form>
				</div>
			</modal>
			<!-- 添加商户 -->
			<modal :title="MadalTitle" v-model="merchantShow" :centered="true" :maskClosable="false" @ok="addStore"
				@cancel="storeCancel">
				<div>
					<el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
							<el-form-item label="选择商户" prop="name">
								<el-select v-model="store_id" filterable placeholder="请选择">
									<el-option v-for="item in storeList" :key="item.id" :label="item.store_name"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
						</el-form>
				</div>
			</modal>
			</div>
			</div>
</template>

<script>
	import modal from 'ant-design-vue/lib/modal';
	import 'ant-design-vue/lib/table/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
	import 'ant-design-vue/lib/modal/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
	export default {
		components: {
			modal
		},
		data() {
			return {
				listData: [],
				keyword: '',
				cate: {},
				input: '',
				checkAll: false,
				page: 1,
				pageSize: 10,
				total: 0,
				checkBoxAll: [], // 选中的数据
				shelvesAlls: [],
				tableList: [],
				status: 1, //团队状态
				visibleShow: false,
				merchantShow: false, //编辑窗口显示
				dialogVisible: false,
				dialogImageUrl: "", //图片
				fileList: [],
				title: '', //团队标题
				sub_title: '', //团队副标题
				statusList: [{
					value: 1,
					label: '正常'
				}, {
					value: 2,
					label: '隐藏'
				}],
				MadalTitle: '',
				activity_id: '', //活动id
				market_id: '', //卖场
				activityList: [], //活动列表
				activityKeyword: '', //活动搜索
				storeList: [], //商户列表
				store_id:'',//选择的商户
				team_id:'',//团队id
				edit:false,//是否编辑
				marketList: [],
				marketId:'',//选择搜索的卖场id
			}
		},
		mounted(options) {
			//let room_id = this.$route.query.room_id
			//团队列表
			this.getListAll();
			//活动列表
			this.getActivityList();
			this.remoteMethod();
		},

		methods: {
			// 获取卖场列表
			remoteMethod() {
			  this.$http.post("/api/root/Market/marketList").then((res) => {
			    if (res.code == 1) {
			      this.marketList = res.data ? res.data : [];
			    }
			  });
			},
			// 选择卖场
			selectMarket() {
			  this.getList(this.marketId);
			},
			//获取活动列表
			getActivityList() {
				let params = {
					status: this.status,
					keyword: this.activityKeyword,
				}
				this.$http.post('/api/root/activity/all/data', params, {}).then(res => {
					if (res.code == 1) {
						let data = res.data;
						this.activityList = res.data;
					} else {
						this.$message.warning(res.msg)
					}
				}).catch(err => {
					this.$message.warning('请求异常')
				})
			},
			//添加团队人员名单
			teamAdd() {
				if(this.fileList.length<=0){
					this.$message.warning('请上传团队logo')
					return;
				}
				if(this.edit===false){
					//新增
					let params = {
						title: this.title,
						sub_title: this.sub_title,
						icon: this.fileList.length != 0 ? this.fileList[0].response.data.id : [],
						status: this.status,
						market_id: this.market_id,
						activity_id: this.activity_id
					}
					this.$http.post('/api/root/activity/team/add', params, {}).then(res => {
						if (res.code == 1) {
							this.fileList=[];
							this.$message.success('操作成功')
							this.getList(this.market_id);
							this.handleCancel();
						} else {
							this.$message.warning(res.msg)
						}
					}).catch(err => {
						this.$message.warning('请求异常')
					})
				}else{
					//编辑
					let params = {
						id:this.team_id,
						title: this.title,
						sub_title: this.sub_title,
						status: this.status,
						market_id: this.market_id,
						activity_id: this.activity_id
					}
					if(this.fileList[0].response){
						params.icon = this.fileList[0].response.data.id;
					}
					this.edit=false;
					this.$http.post('/api/root/activity/team/edit', params, {}).then(res => {
						if (res.code == 1) {
							this.$message.success('操作成功')
							this.getList(this.market_id);
							this.handleCancel();
						} else {
							this.$message.warning(res.msg)
						}
					}).catch(err => {
						this.$message.warning('请求异常')
					})
				}
				
			},
			handleAdd() {
				this.MadalTitle = "添加战队";
				this.visibleShow = true;
			},
			//获取所有团队列表
			getListAll(){
				let params = {
					keyword: this.keyword,
					status: this.status,
					page: this.page,
					pagesize: this.pageSize
				}
				let that = this;
				that.$http.post('/api/root/activity/team/list', params).then(res => {
					if (res.code === 1) {
						var data = res.data.teams
						if (data.length > 0) {
							that.total = res.data.count
							that.listData = data
						} else {
							that.total = 0
							that.listData = []
						}
					} else {
						that.$message.error(res.msg)
					}
				}).catch(err => {
					that.$message.error(err.msg)
				})
			},
			getList(market_id) {
				let params = {
					market_id:market_id,
					keyword: this.keyword,
					status: this.status,
					page: this.page,
					pagesize: this.pageSize
				}
				let that = this;
				that.$http.post('/api/root/activity/team/list', params).then(res => {
					if (res.code === 1) {
						var data = res.data.teams
						if (data.length > 0) {
							that.total = res.data.count
							that.listData = data
						} else {
							that.total = 0
							that.listData = []
						}
					} else {
						that.$message.error(res.msg)
					}
				}).catch(err => {
					that.$message.error(err.msg ? err.msg : err.toString())
				})
			},
			// 图片上传
			handleRemove(file, fileList) {
				this.fileList = fileList;
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;

				this.dialogVisible = true;
			},
			handleExceed(files, fileList) {
				this.$message.warning(`当前限制上传一张图片,请先删除原图片`);
			},
			handleAvatarSuccess(res, file, fileList) {
				this.fileList = fileList;
			},
			beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isLt2M) {
					this.$message.error("上传商品图片大小不能超过 2MB!");
				}
				return isLt2M;
			},
			getHMS(time) {
				const hour = parseInt(time / 3600) < 10 ? '0' + parseInt(time / 3600) : parseInt(time / 3600)
				const min = parseInt(time % 3600 / 60) < 10 ? '0' + parseInt(time % 3600 / 60) : parseInt(time % 3600 / 60)
				const sec = parseInt(time % 3600 % 60) < 10 ? '0' + parseInt(time % 3600 % 60) : parseInt(time % 3600 % 60)
				return hour + ':' + min + ':' + sec
			},
			// 编辑详情
			toEdit(id,activity_id) {
				this.MadalTitle = "战队编辑"
				this.visibleShow = true
				this.activity_id=activity_id;
				this.edit=true;
				this.team_id=id;
				let params = {
					id:id
				}
				let that = this;
				that.$http.post('/api/root/activity/team/detail', params).then(res => {
					if (res.code === 1) {
						let data = res.data
						this.market_id=data.market_id;
						this.activity_id=data.activity_id;
						this.title=data.title;
						this.sub_title=data.sub_title;
						this.status=data.status;
						if (data.icon!='') {
						 this.fileList.push({
						   url: data.icon,
						   id:''
						 });
						}
					} else {
						that.$message.error(res.msg)
					}
				})
				
			},
			//添加商户
			addMerchant(id,activity_id) {
				this.MadalTitle = "添加商户"
				this.merchantShow = true
				this.team_id=id;//团队id
				this.activity_id=activity_id;
				this.getStoreList();
			},
			//获取商户列表
			getStoreList(){
				let params = {
					entry_status: 1,
					delete:0,
				}
				let that = this;
				that.$http.post('/api/root/store/select/all', params).then(res => {
					if (res.code === 1) {
						let data = res.data
						if (data.length > 0 || res.code===1) {
							that.storeList = data
							
						} else {
							that.storeList = []
						}
					} else {
						that.$message.error(res.msg)
					}
				}).catch(err => {
					that.$message.error(err.msg ? err.msg : err.toString())
				})
			},
			//添加团队商户
			addStore(){
				let params = {
					activity_id:this.activity_id,
					team_id:this.team_id,
					store_id:this.store_id
				}
				let that = this;
				that.$http.post('/api/root/activity/team/store/add', params).then(res => {
					if (res.code === 1) {
						that.$message.success('添加成功')
					} else {
						that.$message.error(res.msg)
					}
				}).catch(err => {
					that.$message.error(err.msg ? err.msg : err.toString())
				})
			},
			handleCancel() {
				this.MadalTitle = ''
				this.dialogVisible = false
				this.visibleShow = false
				this.fileList=[];
			},
			//隐藏弹窗
			storeCancel(){
				this.MadalTitle = ''
				this.merchantShow = false
			},
			
			// 选择状态
			selectStatus() {
				this.page = 1
				this.getShareList(this.room_id)
			},
			// 多选
			handlerCheckbox(i) {
				console.log(i);
				let arr = this.checkBoxAll;
				if (arr.includes(i)) {
					let index = arr.indexOf(i);
					if (index != -1) {
						arr.splice(index, 1);
						this.shelvesAlls.splice(index, 1);
						if (this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				} else {
					this.checkBoxAll.push(i);
					this.shelvesAlls.push(this.tableList[i].id);
					if (this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				};
				console.log(this.shelvesAlls);
			},
			// 全选与全不选
			handerCheckAll() {
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				this.shelvesAlls = [];
				if (this.checkAll) {
					for (let i = 0; i < arr; i++) {
						this.checkBoxAll.push(i);
					}
					this.checkBoxAll.map(v => {
						this.shelvesAlls.push(this.tableList[v].id.toString());;
					})
				} else {
					this.checkBoxAll = [];
					this.shelvesAlls = []
				}
				console.log(this.shelvesAlls);
			},
			//搜索
			handerSeach() {
				if(!this.marketId){
					this.$message.error('请先选择卖场')
					return;
				}
              this.getList(this.marketId)
			},

			handleSizeChange(val) {
				this.pageSize = val;
				this.getShareList(this.room_id)
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getShareList(this.room_id)
			},
			formatDate(value) {
				let date = new Date(parseInt(value) * 1000);
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				m = m < 10 ? "0" + m : m;
				let d = date.getDate();
				d = d < 10 ? "0" + d : d;
				let h = date.getHours();
				h = h < 10 ? "0" + h : h;
				let minute = date.getMinutes();
				let second = date.getSeconds();
				minute = minute < 10 ? "0" + minute : minute;
				second = second < 10 ? "0" + second : second;
				return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
			},
			//商户列表跳转
			pageStore(id,market_id){
				this.$router.push({
				  name: "teamStoreList",
				  query: {id,market_id},
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	@import 'index.less';

	.partnerList_bottom_new_goods_screening {
		width: 100%;
		height: auto;
		display: flex;

		.searchBtn {
			max-width: 90px;
			min-width: 68px;
			height: 42px;
			line-height: 42px;
			background-color: #409EFF;
			margin-left: 5px;
			border: 0 none;
			outline: none;
			border-radius: 4px;
			color: #fff;
			cursor: pointer;
		}

		.inputBox {
			margin-right: 20px;
		}
	}
</style>
<style>
	.ant-modal{
		width: 590px !important;
	}
</style>
